import './index.scss'
import { useState } from 'react'
import { useEventEmitter, useMount } from 'ahooks'
import { Button, Layout, Menu, theme, Avatar, Tooltip, App } from 'antd'
import { useNavigate } from 'react-router-dom'
import { DrawerBox, ModelBox } from '../Model'
import { ContentBox } from './ContentBox'
import { GetIndexedDB, PutIndexedDB } from '../Utils/IndexedDB'

import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    WechatOutlined,
    LockOutlined,
    LogoutOutlined,
    HomeOutlined,
    FundProjectionScreenOutlined,

    AreaChartOutlined,
    AccountBookOutlined,
    BarChartOutlined,
    BarsOutlined,
    CarOutlined,
    IdcardOutlined,
    UserSwitchOutlined,
    BorderTopOutlined,
    HeatMapOutlined,
    InfoCircleOutlined,
    ShoppingCartOutlined,
    ProductOutlined,
    AuditOutlined,
    DeleteOutlined,
    DotChartOutlined,
    OpenAIOutlined,
} from '@ant-design/icons'

const { Header, Sider, Content } = Layout

const menusIconMapping = {
    Home: <HomeOutlined style={{ color: '#13c2c2' }} />,
    MaterialFreight: <AreaChartOutlined style={{ color: '#13c2c2' }} />,
    CaiLiaoFei: <AccountBookOutlined style={{ color: '#13c2c2' }} />,
    MaterialTransportation: <BarChartOutlined style={{ color: '#13c2c2' }} />,
    MaterialTransportationDetails: <BarsOutlined style={{ color: '#13c2c2' }} />,
    MachineryMobilizationDetails: <CarOutlined style={{ color: '#13c2c2' }} />,
    Carrier: <IdcardOutlined style={{ color: '#13c2c2' }} />,
    GongYingShang: <UserSwitchOutlined style={{ color: '#13c2c2' }} />,
    ProjectLocation: <BorderTopOutlined style={{ color: '#13c2c2' }} />,
    ElectronicFence: <HeatMapOutlined style={{ color: '#13c2c2' }} />,
    WarningInfo: <InfoCircleOutlined style={{ color: '#13c2c2' }} />,
    CaiLiaoYunShuTongJi: <DotChartOutlined style={{ color: '#13c2c2' }} />,
    DingDanInfo: <ShoppingCartOutlined style={{ color: '#13c2c2' }} />,
    ShangPinInfo: <ProductOutlined style={{ color: '#13c2c2' }} />,
    GongYingShangInfo: <AuditOutlined style={{ color: '#13c2c2' }} />,
    TuiHuoInfo: <DeleteOutlined style={{ color: '#13c2c2' }} />,
    GetBuyOrderOlap: <AreaChartOutlined style={{ color: '#13c2c2' }} />
}
const index = () => {
    const { notification } = App.useApp();
    const onNavigate = useNavigate()
    const avatarUrl = 'https://image.ljkjkf.com/intellisiteSystem_TieKe/Common/images/Avatar/AvatarA17.webp'
    const [collapsed, setCollapsed] = useState(false)
    const { token: { colorBgContainer, borderRadiusLG } } = theme.useToken()
    const [MenuList, setMenuList] = useState([])
    const [MenuActive, setMenuActive] = useState([])
    const [OptionsCall, setOptionsCall] = useState()
    const [UserInfo, setUserInfo] = useState([])

    const [optionsList, setOptionsList] = useState([])
    const [ModelBoxCall, setModelBoxCall] = useState()

    const onBindingCode = () => {
        setModelBoxCall({ type: 'WeChartBinding', title: '微信绑定', width: 600 })
    }

    const onUnbindCode = () => {
        setModelBoxCall({ type: 'WeChartUnbind', title: '微信解绑', width: 600 })
    }

    const onModifyPossword = () => {
        setOptionsCall({ type: 'FormModifyPassword', title: '修改密码' })
    }
    const onStart = () => onNavigate('/Start')
    const onOutSign = () => onNavigate('/')




    useMount(async () => {
        // const options = await GetIndexedDB('options')
        // console.log('options', options)
        const menu = await GetIndexedDB('menu')
        const menuList = menu.map(({ rName, url }) => ({ key: url, label: rName, icon: menusIconMapping[url] }))
        setMenuList(menuList)
        const open = await GetIndexedDB('open')
        setMenuActive([open])
        getUserInfo()
    })

    const onBindingImage = () => {
        setModelBoxCall({ type: 'WeChartBindingImage', title: '关注微信公众号', width: 600 })
    }

    const getUserInfo = async () => {
        const userInfo = await GetIndexedDB('userInfo')
        setUserInfo(userInfo)
        const [{ isOpenId }] = userInfo
        const optionsList = [
            { uuid: 5, title: '关注公众号', icon: <OpenAIOutlined onClick={onBindingImage} style={{ color: '#07c160' }} /> },
            isOpenId === 0 ?
                { uuid: 0, title: '微信绑定', icon: <WechatOutlined onClick={onBindingCode} style={{ color: '#07c160' }} /> } :
                { uuid: 1, title: '微信解绑', icon: <WechatOutlined onClick={onUnbindCode} style={{ color: '#f5222d' }} /> },
            { uuid: 2, title: '修改密码', icon: <LockOutlined onClick={onModifyPossword} style={{ color: '#13c2c2' }} /> },
            { uuid: 3, title: '大屏首页', icon: <FundProjectionScreenOutlined onClick={onStart} style={{ color: '#13c2c2' }} /> },
            { uuid: 4, title: '退出登录', icon: <LogoutOutlined onClick={onOutSign} style={{ color: '#f5222d' }} /> },
        ]
        setOptionsList([...optionsList])
    }



    const IndexEvent = useEventEmitter()
    IndexEvent.useSubscription(async val => {
        const { type, data } = val
        if (type === 'selectMenu') {
            setMenuActive([data])
            await PutIndexedDB('open', data)
        }
        if (type === 'RefreshUser') getUserInfo()
    })

    const onMenuClick = ({ key }) => {
        if (MenuActive[0] === key) return false
        IndexEvent.emit({ type: 'onMenuClick', data: key })
    }

    return (
        <Layout className='AdminPage'>
            <Sider trigger={null} collapsible collapsed={collapsed} theme='light'>
                <div style={{ height: 8 }} />
                <Menu
                    theme="light"
                    mode="inline"
                    selectedKeys={MenuActive}
                    items={MenuList}
                    onClick={onMenuClick}
                />
            </Sider>
            <Layout>
                <Header className='Header' style={{ padding: 0, background: colorBgContainer }}>
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined style={{ color: '#13c2c2' }} /> : <MenuFoldOutlined style={{ color: '#13c2c2' }} />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{ fontSize: 16, width: 64, height: 64 }}
                    />

                    <div className='HeaderOptions'>
                        <div className='Title'>材料运输管理平台</div>
                        <div className='Right'>
                            <div className='options'>
                                {optionsList.map(({ uuid, title, icon }) =>
                                    <Tooltip key={uuid} title={title}>
                                        {icon}
                                    </Tooltip>
                                )}
                            </div>
                            <div className='user'>
                                <Avatar size={48} src={<img src={avatarUrl} alt="avatar" />} />
                                <div className='userInfo'>
                                    <div>{UserInfo[0]?.uRole}</div>
                                    <div>{UserInfo[0]?.ulName}</div>
                                </div>
                            </div>
                        </div>

                    </div>
                </Header>
                <Content style={{ margin: 16, minHeight: 280 }}>
                    <ContentBox IndexEvent={IndexEvent} MenuList={MenuList} />
                </Content>
            </Layout>
            <DrawerBox OptionsCall={OptionsCall} />
            <ModelBox OptionsCall={ModelBoxCall} ModalEvent={IndexEvent} />
        </Layout>
    );
};

export default index;